<template>
  <div class="person">
    <h1>情况1：</h1>
    <h2>监视【ref】定义的【基本数据类型】</h2>
    <h3>sum = {{sum}}</h3>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup>
  import {ref,watch} from "vue";

  let sum = ref(0)

  function changeSum(){
    sum.value ++
  }

  watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了', '新值' + newValue, '旧值' + oldValue)
  })

</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>
